<template>
	<view class="openLive">
		<view class="nav_bar" style="background: #FFF">
			<uni-nav-bar left-icon="left" title="申请开厅" right-text="申请记录" :border='false' :fixed="true"
				@clickLeft="$util.back()"
				@clickRight="$util.toUrl(`/pages/guild/openLiveList?guild_id=${info.guild_id}&circle_id=${info.circle_id}`)"></uni-nav-bar>
		</view>
		<view class="nav_box"></view>
		
		<view class="avatar flex_r_around" @click="chooseAvatar">
			<image :src="info.cover_img" mode="aspectFill" v-if="info.cover_img"></image>
			<u-icon name="plus" bold size="40rpx" color="#6B37E2" v-else></u-icon>
		</view>
		
		<view class="input flex_r_between">
			<text>房间昵称</text>
			<input type="text" placeholder="输入房间昵称" placeholder-class="input-placeholder" v-model="info.room_name" />
		</view>

		<view class="input flex_r_between">
			<text>手机号码/ID</text>
			<input type="text" placeholder="输入手机号/ID" placeholder-class="input-placeholder" v-model="info.owner_mobile" />
		</view>

		<!-- <view class="input flex_r_between">
			<text>厅规模</text>
			<input type="text" placeholder="请输入规模" placeholder-class="input-placeholder" v-model="info.sala_scale" />
		</view> -->

		<view class="input flex_r_between" @click="show = true">
			<text>类型</text>
			<view class="text flex_center" :id="type_name ? '' : 'nohave'">
				<text>{{ type_name || '请选择' }}</text>
				<view class="icon">
					<u-icon name="arrow-right" color="#999" size="28rpx"></u-icon>
				</view>
			</view>
		</view>

		<button @click="applyOpenRoom" 
			:disabled="!info.owner_mobile || !info.room_name || !type_name || !info.cover_img"
		>
			提交审核
		</button>

		<u-picker :show="show" :columns="type" keyName="value"
			@confirm="confirm"
			@close="show = false"
			@cancel="show = false"
			:closeOnClickOverlay="true"
		></u-picker>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					// 厅名称
					room_name: '',
					// 厅头像
					cover_img: '',
					sala_scale: '',
					owner_mobile: '',
					guild_id: '',
					type: 0,
					circle_id: 0,
				},

				type_name: '',


				show: false,
				type: [
					[],
				],
				
			}
		},
		methods: {
			applyOpenRoom() {
				
				if(!this.info.room_name){
					return this.$util.msg('请填写房间昵称');
				}
				
				if(!this.info.owner_mobile){
					return this.$util.msg('请填写手机号码');
				}
				
				// if(!this.info.sala_scale){
				// 	return this.$util.msg('请填写公会规模');
				// }
				
				if(!this.info.type){
					return this.$util.msg('请选择类型');
				}
				
				this.$post('/guild/applyOpenRoom', this.info).then(res => {
					this.$util.msg('申请成功')
				})
			},
			
			chooseAvatar() {
				this.$native.authorize('photos');
				var count = 1;
				uni.chooseImage({
					count: count,
					success: (file) => {
						uni.navigateTo({
							url: `/pages/index/cropper?src=${file.tempFilePaths[0]}`,
							events: {
								getImage: (data) => {
									this.info.cover_img = data.src;
								}
							}
						});
					},
					fail: (err) => {
						// this.$util.msg(`${err.errMsg}----${err.errCode}`);
					}
				})
			},

			getType() {
				this.$get('/roomV2/getConf',{
					type:1,
					circle_id: this.info.circle_id
				}).then(res => {
					res.data.room_tag_list.forEach(element=>{
						if(element.id != 0){
							this.type[0].push(element);
						}
					});
					this.type = JSON.parse(JSON.stringify(this.type));
				});
			},
			
			confirm(e){
				this.info.type = e.value[0].id;
				this.type_name = e.value[0].value;
				this.show = false;
			},

		},

		onLoad(option) {
			if (option) {
				this.info.guild_id = option.guild_id;
				this.info.circle_id = option.circle_id;
			}
			this.getType();
		}
	}
</script>

<style lang="less" scoped>
	.openLive {
		padding: 32rpx 32rpx;
	}
	
	.avatar {
		width: 200rpx;
		height: 200rpx;
		background: #F8F8F8;
		border-radius: 16rpx;
		border: 2rpx dashed #979797;
		overflow: hidden;
		image {
			width: 200rpx;
			height: 200rpx;
		}
	}

	.input {
		height: 100rpx;
		background: #F8F8F8;
		border-radius: 16rpx;
		padding: 0 32rpx;
		margin-top: 20rpx;

		text {
			font-size: 28rpx;
			color: #131313;
		}

		input {
			flex: 1;
			text-align: right;
			font-size: 28rpx;
			color: #333;
		}

		.text {
			flex: 1;
			text-align: right;

			text {
				flex: 1;
				font-size: 28rpx;
				color: #333;
				line-height: 28rpx;
			}

			.icon {
				margin-left: 6rpx;
			}
		}

		#nohave {
			text {
				color: #999999;
			}
		}
	}

	button {
		position: fixed;
		bottom: 30rpx;
		left: 32rpx;
		width: 686rpx;
		height: 100rpx;
		background: #6B37E2;
		border-radius: 50rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 100rpx;
		text-align: center;
	}
</style>